<template>
  <div
      style="position:absolute;top: 0;width: 100%" :style="style">

  </div>
</template>
<script>
export default {
  data() {
    return {
      style: '',
      module: {
        config: {
          outer: {},
        }
      }
    }
  },

  methods: {
    // 初始化
    init(module) {
      this.module = module
      this.setOuterStyle()
    },

    // 设置外层容器样式
    setOuterStyle() {
      let style = []
      let config = this.module.config.background || {}
      if (config.top !== '') style.push('top:' + config.top / 2 + 'px')
      if (config.bottom !== '') style.push('bottom:' + config.bottom / 2 + 'px')
      if (config.left !== '') style.push('left:' + config.left / 2 + 'px')
      if (config.right !== '') style.push('right:' + config.right / 2 + 'px')
      if (config.width) style.push('width:' + config.width / 2 + 'px')
      if (config.height) style.push('height:' + config.height / 2 + 'px')
      if (config.background && !config.background2) style.push('background:' + config.background)
      if (config.background2) {
        style.push('background-image: linear-gradient('+config.direction+ ', ' + config.background + ', ' + config.background2 + ')')
      }
      if (config.borderBottomLeftRadius) {
        style.push('border-bottom-left-radius:' + config.borderBottomLeftRadius / 2 + 'px')
        // style.push('border-bottom-left-radius:100%')
      }
      if (config.borderBottomRightRadius) {
        style.push('border-bottom-right-radius:' + config.borderBottomRightRadius / 2 + 'px')
        // style.push('border-bottom-right-radius:100%')
      }

      this.style = style.join(';')
    }
  }
}
</script>